<div class="op-form-table">
    <div class="row" data-bind="visible: $data.commands().length > 0">
        <div class="col-md-48 op-form-commands">
            <div class="btn-group btn-group-xs" data-bind="foreach: commands">
                <a href="#" class="btn btn-default btn-action"
                   data-bind="attr: { disabled: !$root.isInEditMode() || $parent.selectionMismatch($data.minSelection) || $parent.selectionNotExpected($data) }, text: name, click: $parent.command.bind($parent, id), security: $data.role"></a>
            </div>
        </div>
    </div>

    <div data-bind="visible: !rows() || rows().length === 0" class="text-muted">Aucune donnée présente</div>

    <table class="table-striped table-condensed table-hover table op-detail-list" data-bind="visible: rows() && rows().length > 0">
        <thead>
        <tr data-bind="foreach: columns">
            <!--<th data-bind="text: $data.header, css: $data.style"></th>-->
            <th data-bind="attr: { class: $data.style, width: $data.width }">
                <a href="#" data-bind="click: $parent.orderBy.bind($parent)">
                    <span data-bind="text: $data.header"></span>
                    <i class="fa fa-caret-down" data-bind="visible: $parent.isSortedBy(id, 'DESC')"></i>
                    <i class="fa fa-caret-up" data-bind="visible: $parent.isSortedBy(id, 'ASC')"></i>
                </a>
            </th>
        </tr>
        </thead>
        <tbody data-bind="foreach: rows">
        <tr data-bind="foreach: $parent.columns, css: { selected: $parent.isItemSelected.call($parent, $data), strike: $parent.isItemCanceled($data), danger: $data.isValid && $data.isValid() === false }">
            <!-- ko if: $data.type !== 'object' -->
            <td data-bind="formattedValue: $parent[$data.id],
                css: $data.style,
                format: $data.format,
                click: $root.isInEditMode() ? $parents[1].itemClick.bind($parents[1], $parent) : undefined,
            attr: { role: $root.isInEditMode() ? 'clickable' : '' }"></td>
            <!-- /ko -->
            <!-- ko if: $data.type === 'object' -->
            <td data-bind="css: $data.style">
                <a data-bind="link: $parent[$data.id], click: $parents[1].linkClick.bind($parents[1], $parent)"></a>
            </td>
            <!-- /ko -->
        </tr>
        </tbody>
    </table>

</div>